#include('../../header.html', {title: '在线课程'})

<div class="es-wrap">

  <div id="content-container" class="container">
    <div class="row row-3-9 my-layout">
      <div class="col-md-3">
        #include('../sideMenu.html', {user: 'tea', name: '在教课程'})
      </div>
      <div class="col-md-9" id="myTeach">
        <div class="pop-dialog" style="display: none;">
          <div class="pop-body">
            <span class="pop-close">&bigotimes;</span>
            <div class="pop-content">

              <div class="panel-create-course">
                <div class="panel-heading">
                  <h2>创建课程</h2>
                </div>
                <form class="form-horizontal panel-body" @submit.prevent="newCourse">
                  <div class="course-piece">课程类型</div>
                  <div class="form-group cd-row mb0">
                    <div class="col-lg-12 col-xs-12">
                      <div class="course-select js-courseSetType active" data-type="normal">
                        <i class="es-icon es-icon-putongkecheng "></i>
                        <div class="course-type">普通课程</div>
                        <div class="course-intro">支持视频，支持作业、笔记等多个学习工具的课程</div>
                      </div>
                    </div>
                  </div>
                  <div class="course-title form-group">
                    <div class="mlm pull-left controls-label text-lg">
                      <div class="course-piece title">课程标题</div>
                    </div>
                    <div class="col-md-12 controls course-title-input">
                      <input required="required" class="form-control" v-model="newCourseName">
                    </div>
                  </div>
                  <div class="text-center">
                    <button class="btn btn-sm btn-primary" type="submit">创建</button>
                    <span class="btn btn-link link-gray" onclick="closePop('myTeach')">取消</span>
                  </div>
                </form>
              </div>

            </div>
          </div>
        </div>

        <div class="panel panel-default" role="my-teaching-course-sets">
          <div class="panel-heading">
            在教课程
            <button class="pull-right btn btn-info btn-sm" @click="openpop">
              <span class="es-icon es-icon-anonymous-iconfont"></span> 创建课程
            </button>
          </div>

          <div class="panel-body">
            <table class="table table-striped" id="course-table" style="word-break:break-all;">
              <thead>
              <tr>
                <th width="45%">名称</th>
                <th>学员数</th>
                <th>状态</th>
                <th>时间</th>
                <th width="20%">操作</th>
              </tr>
              </thead>
              <tbody>
              <!-- 教学课程列表 -->
              <tr is="course-tr" v-for="(c, index) in courses" :course="c" :index="index"></tr>
              <tr v-if="courses.length <= 0">
                <td colspan="5" align="center">暂无课程，快去添加！</td>
              </tr>
              </tbody>
            </table>
            <nav class="text-center">

            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<template id="course-tr">
  <tr>
    <td>
      <a class="pull-left mrm link-primary" href="#">
        <img class="course-picture" :src="course.cover" :alt="course.name + '图片'"
             width="100">
      </a>
      <div class="mlm">
        <a class="link-primary" :href="'/course/'+course.id+'/info'">{{course.name}}</a>
      </div>
    </td>
    <td>{{course.students}}</td>
    <td>
      <span v-if="course.status==1" class="color-success">已发布</span>
      <span v-else-if="course.status==0" class="color-warning">未发布</span>
    </td>
    <td>{{course.time.substr(0, 10)}}</td>
    <td>
      <a class="btn btn-primary btn-xs" target="_blank" :href="'/course/set/'+course.id+'/courseInfo'">管理</a>
      <a class="btn btn-danger btn-xs" @click="del">删除</a>
    </td>
  </tr>
</template>
<script src="/static/layui/layer/layer.js"></script>
<script>
  var teaVm = new Vue({
    el: '#myTeach',
    data: {
      newCourseName: "",
      courses: []
    },
    methods: {
      openpop: function () {
        openPop('myTeach')
      },
      // 新建一个课程，弹框中使用
      newCourse: function () {
        $.post('/course/set/newCourse', {name: this.newCourseName}, function (data) {
          if (data.success) {
            $('<a href="' + "/course/set/" + data.payload.id + "/courseInfo" + '" ' +
                '></a>')[0].click();
          }
        });
      }
    },
    components: {
      'course-tr': {
        props: ['course', 'index'],
        template: '#course-tr',
        methods: {
          del: function () {
            var self = this;
            layer.confirm('确定要删除<b class="badge bg-danger">' + this.course.name + '</b>这门课程？<br>删除后将无法找回且所有相关数据将被清空！',
                {title: '删除提示'}, function (index) {
                  $.post('/course/set/' + self.course.id + '/del', function (data) {
                    if (data.success) {
                      layer.msg("删除成功！", {time: 1200, icon: 6});
                      self.$root.courses.splice(self.index, 1);
                    } else {
                      layer.msg("无法删除！", {time: 1200, icon: 5});
                    }
                  });
                  layer.close(index);
                });
          }
        }
      }
    },
    mounted: function () {
      $.post('/course/api/protect/page', function (data) {
        if (data.success) {
          teaVm.courses = data.payload.rows;
        }
      });
    }
  })
</script>

#include('../../footer.html')